<template>
  <div id="addEditContainer">
    <h1 class="con-right-title">
      <i class="fa fa-reply" @click="cancel"></i>
      新增活动
    </h1>
    <div class="container">
      <el-tabs v-model="configCard" @tab-click="handleClick">
        <el-tab-pane label="通用活动配置" name="generalConfig">
          <generalConfig
            ref="generalConfig"
            :activityInfo="activityInfo"
            @handleClick="handleClick"
          ></generalConfig>
        </el-tab-pane>
        <el-tab-pane label="活动定制配置" name="customConfig">
          <customConfig
            ref="customConfig"
            :activityInfo="activityInfo"
            @handleClick="handleClick"
          ></customConfig>
        </el-tab-pane>
        <el-tab-pane label="参与用户规则" name="userRules">
          <userRules
            ref="userRules"
            :routeName="'wh:inviteHaveGift'"
            :activityInfo="activityInfo"
            :userRange="userRange"
            @handleClick="handleClick"
            @submitConfig="submitConfig"
          ></userRules>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import generalConfig from './generalConfig'
import customConfig from './customConfig'
import userRules from '../../common/userRules'
import {
  addGivingCourses,
  getGivingCoursesDetail,
  editGivingCourses
} from '@/api/activityCenter/activityManage/giveLessons'
export default {
  components: { generalConfig, customConfig, userRules },
  data() {
    return {
      configCard: 'generalConfig',
      activityInfo: {},
      userRange: [
        { dictLabel: '全局用户', dictValue: 'GLOBAL' },
        { dictLabel: '定向用户', dictValue: 'SPECIFY' }
      ]
    }
  },
  mounted() {
    const { type } = this.$route.query
    if (type === 'edit' || type === 'copy') {
      getGivingCoursesDetail(this.$route.query.id, {}, (res) => {
        this.activityInfo = res
      })
    }
  },
  methods: {
    /* 选项卡切换 */
    handleClick(tab) {
      this.configCard = tab.name
    },
    /* 取消 */
    cancel() {
      this.$router.push({ name: 'wh:inviteHaveGift' })
    },
    /* 保存 */
    submitConfig() {
      const arr = ['generalConfig', 'customConfig', 'userRules']
      let obj = {}
      arr.forEach((item) => {
        let res = this.$refs[item].collectData()
        if (res.tab) this.configCard = res.tab
        else if (item === 'userRules') {
          // const activityUserRangeConfig = {
          //   groupId: res.orienteeringUserGroup[0],
          //   userRangeType: res.userRange
          // }
          // res.activityUserRangeConfig = activityUserRangeConfig
          console.log(res)
        }
        obj = Object.assign(obj, res)
        delete obj.orienteeringUserGroup
        delete obj.userRange
      })
      const { type } = this.$route.query
      if (!obj.tab && type === 'add') {
        addGivingCourses(obj, () => {
          this.$message.success('保存成功')
        })
      } else if (!obj.tab) {
        editGivingCourses(this.$route.query.id, obj, () => {
          this.$message.success('编辑成功')
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 80%;
  padding: 20px;
  margin: 0 auto;
  border: 1px solid rgb(147, 147, 147);
}
</style>
